<template>
	<view class="app">
		<uni-card>
			<view>
				<uni-row>
					<uni-col>
						<font style="font-size: 33rpx; font-weight: 900;">收货地址</font>

					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col>
						<view v-for="m in myAddrList">
							<view  v-if="m.id == defaultAddressId">
							<font>{{m.addressName+","+m.addressTel}}</font>
							<br>
							
							<font>地址：</font>
							<font>
								{{m.province+" "+m.city+" "+m.county+" "+m.detail}}
							</font>
							<uni-icons type="right" style="float: right;" @click="showDrawer()"></uni-icons>
							</view>
						</view>

					</uni-col>
				</uni-row>
				<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
					<view class="close">
						<checkbox-group @change="checkboxChange">
							<label class="uni-list-cell" v-for="item in addrIndexList">
								<view>
									<checkbox :value="item.value" :checked="item.checked" />
								</view>
								<view>{{item.text}}</view>
							</label>
						</checkbox-group>
						<!-- <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button> -->
					</view>
				</uni-drawer>
			</view>
		</uni-card>

		<uni-card>
			<uni-row>
				<uni-col>
					订单号：{{orderId}}
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col>
					订单详情：
				</uni-col>
			</uni-row>
			<uni-row v-for="o in orderDetailList">
				<uni-col :span="8">
					<image :src="o.productImg" style="width: 200rpx;height: 200rpx;"></image>
				</uni-col>
				<uni-col :span="10" style="margin-top: 30rpx;">
					<font style="font-size: 30rpx; font-weight: bold;">{{o.productName}}</font>
				</uni-col>
				<uni-col :span="6" style="margin-top: 30rpx;">
					<font style="font-size: 30rpx; float: right;">￥{{o.productPrice}}</font>
					<br>
					<font style="float: right;">×{{o.buyNum}}</font>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card>
			<font style="font-size: 30rpx;">优惠券：</font>
			<uni-collapse>
				<uni-collapse-item title="可用优惠券" :show-animation="true">
					<view v-for="c in myCoupons">
						<uni-row>
							<uni-col :span="8">{{c.couponName}}</uni-col>
							<uni-col :span="11">{{c.couponValue}}</uni-col>
							<uni-col :span="5"><button type="primary" @click="useCoupon(c)"
									size="mini">使用</button></uni-col>
						</uni-row>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<br />
			<br />
			<font style="font-size: 30rpx;">商品小计:</font>
			<font style="float: right;">￥{{totalPrice}}</font>
		</uni-card>

		<uni-card>
			<uni-row>
				<uni-col :span="12" style="text-align: right;margin-top: 22rpx;">
					<font style="font-size: 40rpx;">应付款：</font>
					<font style="font-size: 40rpx;color: red;">￥{{shouldPay}}</font>
				</uni-col>
				<uni-col :span="12" style="text-align: right;">
					<button type="warn" style="color: white; width: 200rpx;" @click="payOrder()">立即支付</button>
				</uni-col>
			</uni-row>
		</uni-card>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: "",
				orderDetailList: [],
				totalPrice: 0,
				myCoupons: [],
				shouldPay: "",
				myAddrList: [],
				defaultAddressId: "",
				showLeft: false,
				addrIndexList: [],
				couponId: ""
			}
		},
		methods: {
			checkboxChange: function(e) {

			},
			// 打开窗口
			showDrawer(e) {
				uni.navigateTo({
					url:'/pages/myAddr/myAddr'
				})
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				this[type] = e
			},
			useCoupon(coupon) {
				this.shouldPay = this.totalPrice - coupon.couponValue;
				this.couponId = coupon.id;
			},
			payOrder() {
				uni.request({
					url: 'api/order-server/payOrder',
					method: 'POST',
					data: {
						"orderId": this.orderId,
						"addressId": this.defaultAddressId,
						"couponId": this.couponId,
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					success: (res) => {
						if(res.data.code == 200){
							uni.showToast({
							  title: '付款成功',
							  icon: 'success',
							  duration: 2000
							});
							uni.navigateTo({
								url:'/pages/orderDetail/orderDetail?state=2'
							})
						}else if(res.data.code == 611){
							uni.showToast({
							  title: res.data.msg,
							  icon: 'error',
							  duration: 2000
							});
						}else if(res.data.code == 612){
							uni.showToast({
							  title: res.data.msg,
							  icon: 'error',
							  duration: 2000
							});
						}
					}
				})
			},
			queryOrderInfo() {
				//查询订单详情
				uni.request({
					url: 'api/order-server/queryOrderDetailByOrderId',
					data: {
						"orderId": this.orderId
					},
					header: {
						"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
					},
					success: (res) => {
						this.orderDetailList = res.data.data;
						var totalPrice = 0;
						this.orderDetailList.forEach(e => {
							totalPrice += e.productPrice;
						})
						this.totalPrice = totalPrice;
						this.shouldPay = totalPrice;

						//查询用户优惠券
						var productIds = []
						this.orderDetailList.forEach(e => {
							productIds.push(e.productId)
						})
						uni.request({
							url: 'api/product-server/queryMyCoupons',
							method: 'POST',
							data: productIds,
							header: {
								"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
							},
							success: (res) => {
								this.myCoupons = res.data.data;
							}
						})
						//查询用户地址
						uni.request({
							url: 'api/custom-server/queryAddrByUserId',
							data: {

							},
							header: {
								"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ6eU1hbmFnZSI6eyJpZCI6IjE4MjA3NzkzMTgxODg1NzY3NjgiLCJtYW5hZ2VBY2NvdW50IjoiY2oiLCJtYW5hZ2VOaWNrTmFtZSI6ImNqIn19.AI1W3jxpA1T1k438YI8weWTw_51jKU2uUQAjKKJ3Rig"
							},
							success: (res) => {
								this.myAddrList = res.data.data;

								this.addrIndexList = []
								this.myAddrList.forEach(e => {
									var addrIndex = {
										value: "",
										text: ""
									};
									addrIndex.value = e.id;
									addrIndex.text = e.province + " " + e
										.city + " " + e
										.county + " " + e.detail;

									this.addrIndexList.push(addrIndex);

									if (e.defaultAddress == 1) {
										this.defaultAddressId = e.id;
									}
								})
							}
						})
					}
				})
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.queryOrderInfo();

		},
		created() {
			this.queryOrderInfo();
		}
	}
</script>

<style lang="scss">
	.app {
		position: relative;

	}

	.bar {
		margin-top: 500rpx;
		position: fixed;
		z-index: 1000;
		/* 确保 bar 在其他元素之上 */
		display: flex;
		// width: 100%;
	}

	.uni-list-cell {
		justify-content: flex-start
	}
</style>